<template>
	<view class="certDetail">
		<view class="main">
			<view class="main_item">
				<view>
					证件类型
				</view>
				<view>
					{{ userCertDetail.certName }}
				</view>
			</view>
			<view class="main_item">
				<view>
					作业项目
				</view>
				<view>
					{{ userCertDetail.certWorkName }}
				</view>
			</view>
			<view class="main_item">
				<view>
					证书编码
				</view>
				<view>
					{{ userCertDetail.certNum }}
				</view>
			</view>
			<view class="main_item">
				<view>
					有效期
				</view>
				<view>
					{{ userCertDetail.startTime + '至' + userCertDetail.endTime }}
				</view>
			</view>
			<view class="main_item" style="border:none">
				<view>
					证件照片
				</view>
				<view class="imgBox">
					<image :src="item" mode="" v-for="(item, index) in userCertDetail.certImg" :key="index"
						@click="handlePreview(index)"></image>

				</view>
			</view>
		</view>
		<previewMedia ref="previewMedia"></previewMedia>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userCertDetail: {}
		};
	},
	onLoad(e) {
		const msg = uni.getStorageSync('personalInfo_edit_user_certs_msg');
		this.userCertDetail = msg ? JSON.parse(msg) : {};
		// this.userCertDetail=JSON.parse(e.data)
		this.userCertDetail.startTime = this.userCertDetail.startTime.slice(0, 10);
		this.userCertDetail.endTime = this.userCertDetail.endTime.slice(0, 10);
		this.userCertDetail.certImg = this.userCertDetail.certImg.split(',');
	},
	methods: {
		handlePreview(index) {
			this.$previewMedia({
				current: index,
				sources: this.userCertDetail.certImg
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.certDetail {
	display: flex;
	background-color: #f3f6f8;
	flex-direction: column;
	height: 100vh;

	.main {
		margin: 16rpx 20rpx;
		background: #ffffff;
		border-radius: 8rpx;
		padding: 28rpx 32rpx;
		font-size: 28rpx;
		color: #333;

		.main_item {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #eeeeee;

			view:nth-child(1) {
				width: 158rpx;
			}

			view:nth-child(2) {
				word-break: break-all;
				display: flex;
				flex: 1;
			}

			.imgBox {
				display: flex;
				flex: 1;
				flex-wrap: wrap;

				image {
					width: 128rpx;
					height: 128rpx;
					margin-right: 16rpx;
					margin-top: 16rpx;

				}
			}
		}
	}
}
</style>